/* hook组件 useState */
import React, {useState} from "react";
import {Button} from "antd";
import {flushSync} from "react-dom";

/*
* setState 是异步操作，可以用 flushSync 转成 同步
* */

const Demo = function Demo() {
    console.log("render 渲染")
    let [x, setX] = useState(10)
    let [y, setY] = useState(20)
    let [z, setZ] = useState(30)
    const handle = () => {
        flushSync(() => { // 转异步为同步
            setX(x + 1)
            setY(y + 1)
        })
        setZ(z + 1)
    }
    return <div className="demo">
        <span className="num">x:{x}</span>
        <span className="num">y:{y}</span>
        <span className="num">z:{z}</span>
        <Button type="primary" size="small" onClick={handle}>新增</Button>
    </div>
}
export default Demo